<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		* {
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}
		body {
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: rgb(240, 228, 228);
		}
		.quan {
			position: relative;
			width: 180px;
			height: 180px;
			border-radius: 50%;
			border: 3px solid rgb(246, 247, 248);
			box-shadow: 0 0 0 3px rgb(41, 134, 196);
		}
		.shui {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgb(23, 106, 201);
			border-radius: 50%;
			overflow: hidden;
		}
		.shui::after {
			content: '';
			position: absolute;
			top: 0;
			left: 50%;
			width: 150%;
			height: 150%;
			border-radius: 40%;
			background-color: rgb(240, 228, 228);
			animation: shi 5s linear infinite;
		}
		@keyframes shi {
			0% {
				transform: translate(-50%, -65%) rotate(0deg);
			}
			100% {
				transform: translate(-50%, -65%) rotate(360deg);
			}
		}
		.shui::before {
			content: '';
			position: absolute;
			top: 0;
			left: 50%;
			width: 150%;
			height: 150%;
			border-radius: 42%;
			background-color: rgba(240, 228, 228, 0.2);
			animation: xu 7s linear infinite;
		}
		@keyframes xu {
			0% {
				transform: translate(-50%, -60%) rotate(0deg);
				
			}
			100% {
				transform: translate(-50%, -60%) rotate(360deg);
				
			}
		}
	</style>
</head>
<body>
	<!--有一个背景色为蓝色的圆形；然后圆形上面有一个或两个有弧度的白色方形盒子在旋转，通过白色遮住蓝色形成像是波浪的视差。-->
	<div class="quan">
		<div class="shui"></div>
	</div>
</body>
</html>
